<template>
  <div class="projects-info" v-if="project">
    <div class="adminInfo">
      <div class="title">项目总积分</div>
      <div class="content">
        <div class="score">
          <el-icon
            ><i data-v-380af3eb="" class="el-icon"
              ><svg data-v-380af3eb="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                <path
                  fill="currentColor"
                  d="m161.92 580.736 29.888 58.88C171.328 659.776 160 681.728 160 704c0 82.304 155.328 160 352 160s352-77.696 352-160c0-22.272-11.392-44.16-31.808-64.32l30.464-58.432C903.936 615.808 928 657.664 928 704c0 129.728-188.544 224-416 224S96 833.728 96 704c0-46.592 24.32-88.576 65.92-123.264z"
                ></path>
                <path
                  fill="currentColor"
                  d="m161.92 388.736 29.888 58.88C171.328 467.84 160 489.792 160 512c0 82.304 155.328 160 352 160s352-77.696 352-160c0-22.272-11.392-44.16-31.808-64.32l30.464-58.432C903.936 423.808 928 465.664 928 512c0 129.728-188.544 224-416 224S96 641.728 96 512c0-46.592 24.32-88.576 65.92-123.264z"
                ></path>
                <path
                  fill="currentColor"
                  d="M512 544c-227.456 0-416-94.272-416-224S284.544 96 512 96s416 94.272 416 224-188.544 224-416 224zm0-64c196.672 0 352-77.696 352-160S708.672 160 512 160s-352 77.696-352 160 155.328 160 352 160z"
                ></path></svg></i
          ></el-icon>
          <span class="letter"> {{ props.project?.projectScore }}</span>
        </div>
      </div>
    </div>
    <div class="clients">
      <span class="title">需要支持/适配的客户端</span>
      <div class="content">
        <el-tag v-for="client in props.project?.adaptation" :key="client">{{
          client || '无指定'
        }}</el-tag>
      </div>
    </div>
    <div class="descrebe">
      <span class="title">项目描述</span>
      <div class="md">
        <wageditor-readonly :projectDescribe="props.project?.projectDescribe"></wageditor-readonly>
      </div>
    </div>
    <div class="skills">
      <span class="title">附件下载</span>
      <div class="content">
        <el-button @click="downloadFile">下载附件</el-button>
      </div>
    </div>
    <div class="skills">
      <span class="title">项目进度</span>
      <div class="content">
        <el-progress
          type="circle"
          :percentage="props.project?.finish"
          v-if="props.project?.finish !== 100"
        />
        <el-progress type="circle" :percentage="props.project?.finish" v-else status="success" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import WageditorReadonly from '@/components/wageditor/wageditorReadonly.vue'

const props = defineProps({
  project: Object
})

const downloadFile = () => {
  window.location.href = props.project?.file
}
</script>

<style lang="less" scoped>
.projects-info {
  padding-left: 20px;
  .adminInfo .name {
    margin-bottom: 10px;
  }
  .title {
    margin-top: 30px;
    font-size: 16px;
    font-weight: 700;
    padding-left: 10px;
    border-left: 5px solid #1890ff;
  }
  .content {
    margin: 15px 20px 30px;
    .score {
      display: flex;
      align-items: center;
      letter-spacing: 2px;
      .letter {
        margin-left: 5px;
      }
    }
  }
  .md {
    margin: 15px 20px 30px;
    border: #dcdfe6 1px solid;
    border-radius: 10px;
    padding: 0 10px;
  }
  .el-tag {
    margin-right: 15px;
  }
}
</style>
